<template>
  <view class="container">
    <view class="sun-container">
      <!-- 环绕的图片容器 -->
      <view 
        class="image-wrapper" 
        :style="{ width: containerWidth + 'px', height: containerWidth + 6 + 'px' }"
      >
        <!-- 动态渲染36张图片 -->
        <image 
          v-for="(item, index) in imageList" 
          :key="index" 
          :src="item" 
          class="image-item"
          :style="{
            transform: `translate(${positionX[index]}px, ${positionY[index]}px) rotate(${rotationAngle[index]}deg)`,
            width:  '8rpx',
            height:  '20rpx'
          }"
          mode="scaleToFill"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
	 props: {
    imageList: {
      type: Array,
      default: [],
    },
	},
  data() {
    return {
  //     imageList: [
  //       // 这里可以替换为你的36张图片路径
  //       // 示例：['/static/rounded/1.png', '/static/img2.jpg', ...]
		// // '/static/rounded/1.png',
  //       // ...Array(36).fill('/static/roun') // 用随机图片示例
  //     ],
      containerWidth: 90, // 容器宽度
      imageSize: 5, // 图片尺寸
      radius: 39, // 环绕半径
      centerX: 0, // 圆心X坐标
      centerY: 0, // 圆心Y坐标
      positionX: [], // 图片X坐标数组
      positionY: [], // 图片Y坐标数组
      rotationAngle: [] // 图片旋转角度数组
    }
  },
  mounted() {
	 //  for (let i = 0; i < 36; i++) {
	 //    // console.log('图片路径：', images[i]);
		// this.imageList.push('/static/rounded/1.png')
	 //  }
    // 初始化时计算位置
    this.calculatePositions()
    // 窗口尺寸变化时重新计算
    uni.getSystemInfo({
      success: (res) => {
        this.adjustContainerSize(res.window.width)
      }
    })
  },
  methods: {
    // 计算每个图片的位置和旋转角度
    calculatePositions() {
      this.centerX = this.containerWidth / 2
      this.centerY = this.containerWidth / 2
      
      for (let i = 0; i < 36; i++) {
        // 计算角度（弧度）
        const angle = (i * 10) * (Math.PI / 180) // 10度间隔，转换为弧度
        
        // 计算图片位置（x,y）
        const x = this.centerX + this.radius * Math.cos(angle)
        const y = this.centerY + this.radius * Math.sin(angle)
        
        // 计算图片旋转角度（使图片朝向圆心）
        const rotateAngle = (angle * 180 / Math.PI) + 90 // 调整角度方向
        
        this.positionX[i] = x - this.imageSize / 2 // 偏移图片中心
        this.positionY[i] = y - this.imageSize / 2
        this.rotationAngle[i] = rotateAngle
      }
    },
    // 适配不同屏幕尺寸
    adjustContainerSize(screenWidth) {
      // 容器宽度根据屏幕宽度自适应
      const maxWidth = Math.min(screenWidth - 40, 500)
      this.containerWidth = maxWidth
      // 重新计算位置
      this.calculatePositions()
    }
  }
}
</script>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 180rpx;
  height: 180rpx; */
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.sun-container {
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

/* .sun-center {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd700, #ff9900);
  z-index: 10;
  box-shadow: 0 0 20px rgba(255, 153, 0, 0.7);
} */

.image-wrapper {
  position: relative;
  display: flex;
  flex-wrap: wrap;
}

.image-item {
  position: absolute;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
   will-change: transform; /* 优化动画性能 */
}

.image-item:hover {
  transform: translate(var(--x), var(--y)) rotate(var(--rotate)) scale(1.1);
  z-index: 5;
}
</style>